<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        async function async1() {
            console.log("async1 start");
            await async2();
            console.log("async1 end");
        }
        async function async2() {
            console.log("async2");
        }
        console.log("script start");
        setTimeout(function() {
            console.log("setTimeout");
        }, 0);
        async1();
        new Promise(function(resolve) {
            console.log("promise1");
            resolve();
        }).then(function() {
            console.log("promise2");
        });

        //  script start  async1 start  async2  promise1  async1 end  promise2  setTimeout
        //  从上到下，前2个async1,async2函数未调用， console.log("script start"); 打印第一个script start。
        //  遇到async1() 则 console.log("async1 start"); 打印第二个async1 start。遇到await async2()，
        //  遇到 await 就会先返回(跳出这个函数，执行外部的同步代码)，即console.log("async2");打印第三个async2，
        //  执行外部的同步代码，则 console.log("promise1");打印第四个promise1。返回async1中，console.log("async1 end");
        //  打印第五个async1 end。.then()是微任务即console.log("promise2");打印第六个promise2。
        //  setTimeout()是宏任务，则最后打印第七个setTimeout。
    </script>
</body>

</html>